<template>
	<view class="mask">
		<u-popup v-model="isBoxShow" mode="center" :mask-close-able="false">
			<view class="blind-box position-relative">
				<view class="fz-36 text-ffffff text-center gift-tip">您获得了一份空投</view>
				<view class="fz-28 text-ffffff text-center">拆开看看吧</view>
				<view class="gift-box-bg position-absolute" :class="{'big':isBig,'run':isRun}"></view>
				<view class="gift-box" :class="{'boxbig':isBoxShow}">
					<image src="/static/mine/kongtou-gift.png"></image>
				</view>
				<view class="popup-btn-box d-flex justify-content-between align-items-center" >
					<u-button shape="circle" hover-class="none" class="text-ffffff fz-32  btn-style popup-confirm-bg" :loading="openLoading" @click="airdrop">立即拆开</u-button>
				</view>
				<view class="close-icon mx-auto" @click="tui.goBack">
					<image src="/static/market/close-circle.png"></image>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="boxShow" mode="center" :mask-close-able="false">
			<view class="gift-confirm-box">
				<view class="gift-confirm" v-if="airInfo">
					<view class="gift-title">
						<image src="/static/mine/gift-title.png"></image>
					</view>
					<view class="img-box">
						<view class="gift-confirm-img mx-auto">
							<image :src="airInfo.file" mode="aspectFill" v-if="airInfo.type == 1"></image>
							<image :src="airInfo.cover" mode="aspectFill" v-else></image>
							<text class="name" :class="{
								'fzz-26':airInfo.title.length > 12,
								'fzz-24':airInfo.title.length > 14,
								'fzz-22':airInfo.title.length > 18,
								'fzz-20':airInfo.title.length > 21}
							">{{airInfo.title}}</text>
						</view>
					</view>
					<view class="kongtou-gift-bottom">
						<image src="/static/mine/kongtou-gift-bottom.gif"></image>
					</view>
					<view class="popup-btn-box d-flex justify-content-center align-items-center">
						 <u-button type="text" class="text-ffffff fz-32  btn-style popup-confirm-bg" @click="toDetail">去藏品看看</u-button>
					</view> 
				</view>
				<view class="close-icon mx-auto" @click="closePopup">
					<image src="/static/market/close-circle.png"></image>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="noBox" mode="center" :mask-close-able="false">
			<view class="no-box">
				<view class="title">提示</view>
				<view class="content">您没有收到空投~</view>
				<u-button class="btn" hover-class="none" @click="tui.goBack">确认</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isBoxShow:false,
				boxShow:false,
				openLoading:false,
				isBig:false,
				isRun:false,
				airInfo:null,
				noBox:false
			}
		},
		onLoad(options) {
			if(options.noBox){
				this.noBox = true
			}else{
				this.isBoxShow = true
			}
		},
		watch:{
			isBoxShow(val){
				if(val){
					this.isBig = true
					setTimeout(()=>{
						this.isRun = true
					},1000)
				}else{
					this.isBig = false
					this.isRun = false
				}
			}
		},
		methods: {
			//领取空投
			airdrop(){
				this.openLoading = true
				this.$store.dispatch('user/airdrop').then(res=>{
					this.openLoading = false
					this.isBoxShow = false
					this.boxShow = true
					this.tui.getUserInfo()
					this.airInfo = res.data.works
					this.airInfo.no = res.data.user_works.no
					this.airInfo.title = `${this.airInfo.name}#${this.airInfo.no}`
					//刷新藏品列表
					this.$store.commit('works/SET_ISREFRESH',true)
				}).catch(error=>{
					this.isBoxShow = false
					this.openLoading = false
					this.tui.getUserInfo()
				})
			},
			//去藏品
			toDetail(){
				this.boxShow = false
				uni.redirectTo({
					url:`/pages/secondary/collection/index?work_id=${this.airInfo.id}`
				})
			},
			userBoxOpen(){
				this.isBoxShow = false
				this.boxShow = true
			},
			closePopup(){
				this.boxShow = false
				this.tui.goBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: transparent;
	}
	/deep/.u-mode-center-box {
		background: rgba(255, 255, 255, 0) !important;
	}
	/deep/.u-mask-show{
		background: rgba(000, 000, 000, 0.8) !important;
	}
	.blind-box {
		background: rgba(255, 255, 255, 0);
		width: 653upx;
		height: 970upx;
		.gift-tip{
			margin-bottom: 20upx;
		}
		.close-icon {
			width: 64upx;
			height: 64upx;
			
			image {
				width: 64upx;
				height: 64upx;
			}
		}
	}
	.gift-box-bg{
		width: 653upx;
		height: 653upx;
		background: url(/static/mine/gift-box-bg.png) no-repeat;
		background-size: 100% 100%;
		
	}
	.boxbig{
		animation: boxbig 1s linear 1;
	}
	.big{
		animation: big 1s linear 1;
	}
	.run{
		animation: rota 4s linear infinite;
	}
	@keyframes boxbig{
		0%{
			transform:  scale(0);
		}
		
		100%{
			transform:  scale(1);
		}
	}
	@keyframes big{
		0%{
			transform:  rotate(-90deg) scale(0);
		}
		
		100%{
			transform:  rotate(0deg) scale(1);
		}
	}
	@keyframes rota{
		0%{
			transform:  rotate(0deg) scale(1);
		}
		
		100%{
			transform:  rotate(360deg) scale(1);
		}
	}
	.gift-box {
		width: 524upx;
		height: 368upx;
		margin: 136upx auto 100upx;
		image {
			width: 525upx;
			height: 358upx;
		}
	}
	.gift-confirm-box {
		width: 690upx;
		.gift-confirm {
			width: 690upx;
			.gift-title{
				width: 479upx;
				height: 86upx;
				margin:0 auto 50upx;
				margin-bottom: 550upx;
				image{
					width: 479upx;
					height: 86upx;
					vertical-align: top;
				}
			}
			.img-box{
				width: 480upx;
				height: 550upx;
				background:linear-gradient(90deg, rgba(105, 22, 255, 1), rgba(10, 255, 255, 1));
				padding: 6upx;
				border-radius: 14upx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				z-index: 9;
				top: 94upx;
			}
			.gift-confirm-img {
				position: relative;
				width: 100%;
				height: 100%;
				padding: 8upx;
				padding: 18upx 18upx 0 18upx;
				border-radius: 14upx;
				background: #000000;
				z-index: 10 !important;
				overflow: hidden;
				text-align: center;
				image {
					width: 100%;
					height: 440upx;
					border-radius: 10upx;
				}
				.name{
					color: #00FEFF;
					font-size: 30upx;
					font-family: 'PFSC';
					display: inline-block;
					margin-top: 14upx;
				}
				.fzz-26{
					font-size: 26upx;
				}
				.fzz-24{
					font-size: 24upx;
				}
				.fzz-22{
					font-size: 22upx;
				}
				.fzz-20{
					font-size: 20upx;
				}
				.fzz-18{
					font-size: 18upx;
				}
			}
			.kongtou-gift-bottom{
				width: 690upx;
				height: 226upx;
				margin-top: -80upx;
				z-index: 2 !important;
				margin-bottom: 60upx;
				image{
					width: 690upx;
					height: 226upx;
					vertical-align: top;
				}
			}
		}
	
		.close-icon {
			width: 64upx;
			height: 64upx;
			image {
				width: 64upx;
				height: 64upx;
			}
		}
	}
	.popup-btn-box {
		margin-bottom: 100upx;
		.btn-style {
			width: 340upx;
			height: 88upx;
			border-radius: 49upx;
		}
	}
	
	.popup-confirm-bg {
		background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
	}
	
	.no-box{
		width: 640upx;
		height: 400upx;
		background: url(/static/mine/wallet-popup-bg.png) no-repeat;
		background-size: 100% 100%;
		text-align: center;
		color: #292940;
		padding-top: 80upx;
		.title{
			font-size: 36upx;
			font-weight: bold;
			margin-bottom: 30upx;
		}
		.content{
			font-size: 30upx;
			margin-bottom: 50upx;
		}
		.btn{
			width: 560upx;
			height: 90upx;
			border-radius: 45upx;
			background: linear-gradient(134deg, #7A60FF 0%, #1EF7FE 100%);
			font-size: 32upx;
			color: #ffffff;
		}
	}
</style>
